<template>
    <div class="container">
        <RouterView v-slot="{ Component }">
            <transition name="fade">
                <component :is="Component" v-if="flag">
                </component>
            </transition>
        </RouterView>
    </div>
</template>

<script setup lang='ts'>
import { ref, watch, nextTick } from "vue"
import { changeLayout } from "@/stores/modules/changeLayout/index"
let store = changeLayout()
let flag = ref(true)
watch(
    () => store.refresh,
    () => {
        flag.value = false;
        nextTick(() => {
            flag.value = true
        })
    })
</script>

<style lang="scss" scoped>
.fade-enter-from{
    opacity:0;
    transform: scale(0);

}
.fade-enter-active{
	transition:all 1.5s;
}
.fade-enter-to{
	opacity:1;
    transform: scale(1);
}
</style>